<template>
    <div id="Container">
        <table id="Table">
            <tr>
                <td v-for="col in visibleColumns" :key="col.name">
                    <p class="Title">{{ typeof col.label == "function" ? col.label() : col.label }}</p>
                </td>
            </tr>
            <tr v-for="(row, index) in items" :key="row.id" :style="{backgroundColor: index % 2 == 0 ? '' : '#eee', color: row.age < 18 ? 'red' : ''}">
                <td v-for="col in cols(row)" :key="col.name">
                    <p class="Cell">{{ col.value }}</p>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true,
      validator: value => true
    },
    columns: {
      type: Array,
      required: true,
      validator: value => true
    }
  },
  computed: {
    visibleColumns() {
      return this.columns.filter(item => item.visible);
    }
  },
  methods: {
    cols(obj) {
      const retv = [];

      this.visibleColumns.forEach(item => {
        retv.push({
          name: item.name,
          value: this.getValueByName(obj, item.name)
        });
      });

      return retv;
    },
    getValueByName(obj, name) {
      return obj[name];
    }
  }
};
</script>

<style lang="scss" scoped>
#Container {
  // background-color: red;
  height: 500px;
  overflow: scroll;

  &[rtl="true"] {
    direction: rtl;
    tr {
      td {
        .Cell {
          //   text-align: right;
        }
      }
    }
  }
}
.Title {
  color: red;
  margin: {
    right: 10px;
    left: 10px;
  }
}
.Cell {
  border: {
    // color: red;
    // style: solid;
    // width: 1px;
  }

  margin: {
    left: 50px;
    right: 10px;
  }
}
</style>
